<template>
  <page-layout>
    <a-card>
      <a-button size="large" @click="$router.go(-1)">返回</a-button>
      <a-form
        style="margin-top: 36px"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="名称" :required="true">
          <a-input
            placeholder="请输入项目名称"
            size="large"
            v-decorator="[
              'title',
              {
                rules: [{ required: true, message: '请输入任务名称!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="部门" :required="true">
          <a-select
            placeholder="请选择部门"
            size="large"
            v-decorator="[
              'department_id',
              { rules: [{ required: true, message: '请选择部门!' }] }
            ]"
            @change="handleSelectChange"
          >
            <a-select-option
              v-for="item in selectDatas[0]"
              :key="item.department_id"
              :value="item.department_id"
            >
              {{ item.name }}
            </a-select-option>
            <!-- <a-select-option value="male1"> 粤为前端搬砖部 </a-select-option>
            <a-select-option value="female1"> 粤为后端php部 </a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item label="创建者" :required="true">
          <a-select
            placeholder="请选择创建者"
            size="large"
            @change="handleSelectChange"
            v-decorator="[
              'author_id',
              { rules: [{ required: true, message: '请选择创建者!' }] }
            ]"
          >
            <a-select-option
              v-for="item in selectDatas[1]"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="开发团队" :required="true">
          <a-select
            placeholder="请选择开发团队"
            size="large"
            @change="handleSelectChange"
            mode="multiple"
            v-decorator="[
              'team',
              { rules: [{ required: true, message: '请选择开发团队!' }] }
            ]"
          >
            <a-select-option
              v-for="item in selectDatas[1]"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="项目内容">
          <EditorBar
            v-decorator="[
              'introduce',
              ,
              {
                rules: [{ required: true, message: '请输入项目内容!' }]
              }
            ]"
            :isClear="isClear"
          />
        </a-form-item>
        <a-form-item label="开始时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择开始时间"
            v-decorator="[
              'start_time',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择开始时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="结束时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择结束时间"
            v-decorator="[
              'end_time',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择结束时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
             <a-form-item label="附件">
          <a-upload-dragger
            v-decorator="[
              'attachment_url',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="attachment_url"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
            :beforeUpload="beforeUpload"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" size="large" @click="handleSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>
<script>
import { add, detail, edit } from "@/services/projects";
import { getDepartments } from "@/services/department";
import { getUsers } from "@/services/user";
import PageLayout from "@/layouts/PageLayout";
import EditorBar from "@/components/wangEditor";
import moment from "moment";
export default {
  
  name: "demand",
  components: { PageLayout, EditorBar },
  data() {
    this.form = this.$form.createForm(this);
    return {
      isClear: false,
      detail: "",
      selectDatas: [],
      editData: {}
    };
  },
  created() {

  let userInfo = JSON.parse(window.localStorage.getItem('admin.user'))
       
    // 如果时编辑过来
    if (this.$route.query.id) {
      Promise.all([
        detail(this.$route.query.id),
        getDepartments({ type: 2 }),
        getUsers({ type: 2 })
      ]).then((arr) => {
        let editData = arr.splice(0, 1)[0].data.data;
        editData.team = editData.team.map((item) => item.id);
        // console.log(this.form.getFieldsValue());
        // 设置值
        for (let key in this.form.getFieldsValue()) {
          // console.log(key);
          if (key === "end_time" || key === "start_time") {
            // console.log(moment(editData[key]), "moment(editData[key])");
            this.form.setFieldsValue({
              [key]: editData[key] ? moment(editData[key]) : ""
            });
            continue;
          }
          this.form.setFieldsValue({ [key]: editData[key] });
        }
        this.editData = editData;
        this.editData.team = this.editData.team.join(",");
        console.log(this.editData, "this.editData");
        // console.log(this.editData, "this.editData");
        this.selectDatas = arr.map((item) => {
          // if (item.data.code !== 20000) {
          //   this.$message.error("出错了，请刷新页面重试");
          // }
          return item.data.data;
        });
        console.log(this.selectDatas);
      });
    } else {
      Promise.all([getDepartments({ type: 2 }), getUsers({ type: 2 })]).then(
        (arr) => {
            this.form.setFieldsValue({
              department_id: userInfo.department_id,
              author_id:userInfo.user_id
            });
          // console.log(arr, "arr");
          this.selectDatas = arr.map((item) => {
            return item.data.data;
          });
        }
      );
    }
  },
  computed: {},
  methods: {
    moment,
    // 文本编辑器内容改变时的回调函数被
    change(val) {
      console.log(val, 111);
      console.log(this.detail, 111);
    },
    handleSelectChange() {},
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log(err, values.team);
        values.team = values.team.join(",");
        if (!err) {
          if (!this.$route.query.id) {
            add(values).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "提交成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message.success(res.data.message || "提交异常，请重试~");
              }
            });
          } else {
            edit({ ...this.editData, ...values }).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "修改成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message.success(res.data.message || "提交异常，请重试~");
              }
            });
          }
        }
      });
    } ,
     handleChange(info) {
      const status = info.file.status;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        this.$message.success(`${info.file.name} 上传成功~`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    }
    ,beforeUpload(file, fileList) {
      console.log(111);
      console.log(file, fileList);

      // console.log(this.form.getFieldValue("files"), 111);
      // if (fileList.length > 1) {
      //   this.$message.error("头像只能上传一张哦~");
      //   return false;
      // }
    },
        normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
